<div class="GoodsCategoryWrap">
    <ul id="goodscat_<{$widgets_id}>_tree">
    <{foreach from=$data item=parent key=parent_id}>
    <li class="e-cat-depth-1" >
     <p nuid='<{$parent_id}>'><a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$parent_id}>"><{$parent.label}></a></p>
        <{if $parent.sub && $setting.showCatDepth_default == '2'}>
        <ul>
            <li class="e-cat-depth-2">
              <table>
                <{counter start=1 assign="result" print=false }>

                <{if $setting.devide neq 0 }>

                <{foreach from=$parent.sub item=child key=childId}>
                  <{if ($result mod $setting.devide) eq 1 }>
                  <tr>
                    <td>
                      <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$childId }>"><{$child.label}></a><{$setting.page_devide}></td>
                  <{elseif ($result mod $setting.devide) eq 0}>
                  <td> <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$childId }>"><{$child.label}></a>  <{$setting.page_devide}></td>
                  </tr>
                  <{else}>
                  <td> <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$childId }>"><{$child.label}></a>  <{$setting.page_devide}></td>
                <{/if}>
                <{counter assign="result" print=false }>
                <{/foreach}>

                <{/if}>

              </table>
            </li>
        </ul>

        <{elseif $parent.sub && ($setting.showCatDepth_default == '3')}>
          <ul>
          <{foreach from=$parent.sub item=child key=childId}>
               <li class="e-cat-depth-2">
               <p nuid='<{$childId}>'><a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$childId }>"><{$child.label}></a></p>
          <{if $child.sub && ($setting.showCatDepth_default == '3')}>
              <ul>
              <li class="e-cat-depth-3">
              <table>
                <{counter start=1 assign="result" print=false }>

                <{if $setting.devide neq 0 }>

                <{foreach from=$child.sub item=gChild key=gChildId}>
                  <{if ($result mod $setting.devide) eq 1 }>
                  <tr>
                  <td> <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$gChildId }>"><{$gChild.label}></a><{$setting.page_devide}></td>
                  <{elseif ($result mod $setting.devide) eq 0}>
                  <td> <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$gChildId }>"><{$gChild.label}></a><{$setting.page_devide}></td>
                  </tr>
                  <{else}>
                  <td> <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$gChildId }>"><{$gChild.label}></a>  <{$setting.page_devide}></td>
                <{/if}>
                <{counter assign="result" print=false }>
                <{/foreach}>

                <{/if}>

              </table>
            </li>
            </ul>
          <{/if}>
          </li>
          <{/foreach}>
        </ul>
        <{/if}>
    </li>
    <{/foreach}>
    </ul>
</div>

<script>
  withBroswerStore(function(status){
      var gct=$('goodscat_<{$widgets_id}>_tree');
      var depthroots=gct.getElements('li');
      var synState=function(update){
           status.get('gct-state',function(st){
                          var st=JSON.decode(st)||[];
                          if(update){
                             var ul=update.getParent('li').getElement('ul');
                             if(!ul)return;
                             if(ul.style.display!='none'){
                                st.include(update.get('nuid'));
                             }else{
                                st.erase(update.get('nuid'));
                             }
                             return status.set('gct-state',st);
                          }

                          var handles=$$('#goodscat_<{$widgets_id}>_tree p[nuid]');
                          handles.each(function(p,i){
                             var ul=p.getParent('li').getElement('ul');
                             if(!ul)return;
                             if(st.contains(p.get('nuid'))){
                                 ul.show();
                                 if(p.getElement('span'))
                                 p.getElement('span').addClass('show').set('html','-');
                             }else{
                                ul.hide();
                                if(p.getElement('span'))
                                p.getElement('span').removeClass('show').set('html','+');
                             }

                          });
           });
      };
      var getHandle=function(depth,sign){
         depth=depth.getElement('p[nuid]');
         var span=new Element('span');
         if(!sign){
            span.set('html','&nbsp;').addClass('nosymbols').injectTop($(depth));
            return depth
          }
          span.set('html','&nbsp;').addClass('symbols').injectTop($(depth));
          return depth;
      };
      depthroots.each(function(root,index){
          var depth2=root.getElement('ul');
          if(depth2){
            var handle=getHandle(root,true);
            handle.addEvent('click',function(e){
              if(depth2.style.display!='none'){
			  	 depth2.style.display='none';
                 this.getElement('span').addClass('show').set('html','-');
              }else{
			  	depth2.style.display='';
                this.getElement('span').removeClass('show').set('html','+');
              }
              synState(this);
            });
            synState();
          }
      });
  });
</script>